﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
    <head>
        <title>Politist</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="Themeum">

        <!-- Include All Stylesheet -->
        <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" >
        <link rel="stylesheet" href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" >
        <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}" >
        <link rel="stylesheet" href="../static/css/preset.css" th:href="@{/css/preset.css}" >
        <link rel="stylesheet" href="../static/css/owl.carousel.css" th:href="@{/css/owl.carousel.css}" >
        <link rel="stylesheet" href="../static/css/owl.theme.css" th:href="@{/css/owl.theme.css}" >
        <link rel="stylesheet" href="../static/css/magnific-popup.css" th:href="@{/css/magnific-popup.css}" >
        <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}" >
        <link rel="stylesheet" href="../static/css/responsive.css" th:href="@{/css/responsive.css}" >
        <link id="color-preset" rel="stylesheet" type="text/css" href="../static/css/presets/preset1.css" th:href="@{/css/presets/preset1.css}" >
        <!-- Favicon Icon -->
        <!--<link rel="icon" type="image/png" th:href="@{/images/favicon.png}">-->
        <!-- Favicon Icon -->
        <!--[if lt IE 9]>
        <script src="../static/js/html5shive.js}"></script>
        <![endif]-->

    </head>
    <body>
        <!-- Colorpreset Area Start -->
        <div class="color-switcher">
            <a class="toggle-switch" href="#"><i class="fa fa-cog"></i></a>
            <div class="style-choose">
                <a href="#"  data-color="preset1"><img alt="Preset" th:src="@{/images/colorpreset/preset1/preset1.png}"></a>
                <a href="#"  data-color="preset2"><img alt="Preset" th:src="@{/images/colorpreset/preset2/preset2.png}"></a>
                <a href="#"  data-color="preset3"><img alt="Preset" th:src="@{/images/colorpreset/preset3/preset3.png}"></a>
                <a href="#"  data-color="preset4"><img alt="Preset" th:src="@{/images/colorpreset/preset4/preset4.png}"></a>
            </div>
        </div>
        <!-- Colorpreset Area End -->
        <!-- Header Area Start -->
        <!--th:replace 表达式：用目标模板内容来替换自己.-->
        <div th:replace="commonsTemplate::commonsHead(photos)"></div>

        <div class="hidden-lg hidden-md" id="toggle-menu">
            <div class="pull-left logo-area">
                <a href="index.html"><img th:src="@{/images/home1/logo.png}" alt="Logo"></a>
            </div>
            <div class="mobile-menu-toggle pull-right">
                <a href="#"><i class="fa fa-bars"></i></a>
            </div>
            <div class="clearfix"></div>
            <nav class="mobile-menu pull-left hidden-lg hidden-md">
                <ul>
                    <li class="mobile-menu-has-children">
                        <a href="index.html">Home</a>
                        <ul>
                            <li><a href="index.html">Home 1</a></li>
                            <li><a href="index2.html">Home 2</a></li>
                            <li><a href="index3.html">Home 3</a></li>
                        </ul>
                    </li>
                    <li><a href="../static/biography.html">Biography</a></li>
                    <li class="mobile-menu-has-children">
                        <a href="news.html">News</a>
                        <ul>
                            <li><a href="../static/newsDetails.html">News Details</a></li>
                        </ul>
                    </li>
                    <li><a href="../static/event.html">Event</a></li>
                    <li><a href="photo.html">Photos</a></li>
                    <li><a href="../static/volunteer.html">Volunteer</a></li>
                    <li class="mobile-menu-has-children">
                        <a href="shop.html">Shop</a>
                        <ul>
                            <li><a href="../static/shopDetails.html">Shop Details</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Donate</a></li>
                </ul>
            </nav>
        </div>
        <!-- Header Area End -->

        <!-- Breadcrumbs Area Start -->
        <section class="breadcrumbs-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <div class="bread-content text-left">
                            <h2>Photos</h2>
                            <ul>
                                <li><a href="#">Home</a><span>/</span></li>
                                <li>Photo</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Breadcrumbs Area End -->

        <!-- Photos Area Start -->
        <section class="photos-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-xs-12 text-center">
                        <div class="photos-title">
                            <h3>FEBRUARY 16, 2016</h3>
                            <p>GREENVILLE, SC</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo1.jpg}"></a>
                            <img th:src="@{/images/photo/photo1.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo2.jpg}"></a>
                            <img th:src="@{/images/photo/photo2.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo3.jpg}"></a>
                            <img th:src="@{/images/photo/photo3.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo4.jpg}"></a>
                            <img th:src="@{/images/photo/photo4.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo5.jpg}"></a>
                            <img th:src="@{/images/photo/photo5.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo6.jpg}"></a>
                            <img th:src="@{/images/photo/photo6.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo7.jpg}"></a>
                            <img th:src="@{/images/photo/photo7.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo8.jpg}"></a>
                            <img th:src="@{/images/photo/photo8.jpg}" alt="">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-xs-12 text-center">
                        <div class="photos-title">
                            <h3>FEBRUARY 16, 2016</h3>
                            <p>GREENVILLE, SC</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo1.jpg}"></a>
                            <img th:src="@{/images/photo/photo1.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo2.jpg}"></a>
                            <img th:src="@{/images/photo/photo2.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo3.jpg}"></a>
                            <img th:src="@{/images/photo/photo3.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo4.jpg}"></a>
                            <img th:src="@{/images/photo/photo4.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo5.jpg}"></a>
                            <img th:src="@{/images/photo/photo5.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo6.jpg}"></a>
                            <img th:src="@{/images/photo/photo6.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo7.jpg}"></a>
                            <img th:src="@{/images/photo/photo7.jpg}" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12 col-sm-6">
                        <div class="photos">
                            <a class="plus-icon" th:href="@{/images/photo/photo8.jpg}"></a>
                            <img th:src="@{/images/photo/photo8.jpg}" alt="">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-xs-12">
                        <!-- pagination -->
                        <ul class="paginations text-center">
                            <li>
                                <a href="#"><i class="fa fa-long-arrow-left"></i></a>
                            </li>
                            <li  class="active">
                                <a href="#">1</a>
                            </li>
                            <li>
                                <a href="#">2</a>
                            </li>
                            <li>
                                <a href="#">3</a>
                            </li>
                            <li>
                                <a href="#">4</a>
                            </li>
                            <li>
                                <a href="#">5</a>
                            </li>
                            <li>
                                <a href="#">6</a>
                            </li>
                            <li>
                                <a href="#">7</a>
                            </li>
                            <li>
                                <a href="#">8</a>
                            </li>
                            <li>
                                <a href="#">9</a>
                            </li>
                            <li>
                                <a href="#">10</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-long-arrow-right"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- Photos Area End -->

        <!-- Footer Area Start 公共的底部-->
        <!--th:replace 表达式：用目标模板内容来替换自己.-->
        <div th:replace="commonsTemplate::commonsFooter"></div>
        <!-- Footer Area End -->
        <!-- Include All JavaScript -->
        <script th:src="@{/js/jquery.min.js}"></script>
        <script th:src="@{/js/jquery.appear.js}"></script>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <script th:src="@{/js/owl.carousel.min.js}"></script>
        <script th:src="@{/js/jquery.magnific-popup.min.js}"></script>
        <script th:src="@{/js/jquery.countdown.min.js}"></script>
        <script th:src="@{/js/main.js}"></script>
    </body>
</html>

